<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="cu-form-group margin-top">
				<view class="title"> <text class="text-red padding-right-xs">*</text>手机号码：</view>
				<input placeholder="请输入手机号码" name="phone" type="tel" :value="formData.phone"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>再次输入：</view>
				<input placeholder="请输入手机号码" name="phone2" type="tel" :value="formData.phone2"></input>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" form-type="submit">确认绑定</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		changePhone
	} from '@/common/api/auth.js';

	export default {
		data() {
			return {
				isEdit: false,
				formData: {},
				userInfo: {}
			}
		},
		computed: {},
		onLoad(e) {
			if (e.isEdit) {
				this.isEdit = e.isEdit
			}
		},
		mounted() {
			// this.userInfo = {
			// 	uid: "1839920419955945473"
			// }
			// this.userInfo = uni.getStorageSync('userInfo')
		},
		created() {},
		methods: {
			submit(e) {
				console.log(e)
				var formdata = e.detail.value
				if (formdata.phone) {
					// if (!this.$u.test.mobile(phone)) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: "手机号格式不正确"
					// 	})
					// 	return
					// }
				} else {
					uni.showToast({
						icon: 'none',
						title: "手机号不能为空"
					})
					return
				}
				if (formdata.phone2) {
					if (formdata.phone != formdata.phone2) {
						uni.showToast({
							icon: 'none',
							title: "两次输入手机号不一致"
						})
						return
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: "请再次输入手机号"
					})
					return
				}
				changePhone({
					// uid: this.userInfo.uid,
					phone: formdata.phone
				}).then(res => {
					if (this.$s.suc(res)) {
						uni.showToast({
							icon: 'success',
							title: "手机号绑定成功",
							success() {
								uni.redirectTo({
									url: '/pages/index'
								})
							}
						})
					}

				})
			}
		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.top {
		line-height: 260rpx;
		height: 260rpx;
		text-align: center;
		// vertical-align: middle;

		.top-img {
			width: 130upx;
			height: 130upx;
		}
	}

	.tel {
		height: 100rpx;
		text-align: center;
		font-size: 35rpx;
		padding-left: 80rpx;
		padding-right: 80rpx;
	}

	.btn {
		margin: 60rpx auto;
		width: 80%;
	}
</style>